<template>
  <div class="warp">
    <div class="scan-box">
      <div class="left">
        <img :src="imgSrc" alt="扫码试列图" />
      </div>
      <div class="rig">
        <h3>扫码登录</h3>
        <div class="qr-code-box">
          <div class="qr-code">
            <img :src="qrCode64" alt="二维码" v-if="qrCode64" />
            <img :src="errQRCode" alt="失效的二维码" v-else />
            <div class="tops" :class="qrCode64 ? 'hide-tops' : ''">
              <p class="my-mt-5">二维码已失效</p>
              <Button size="mini" @click="refReshQRCode">点击刷新</Button>
            </div>
          </div>
        </div>
        <p>使用&nbsp;<a href="javaScrict:;">网易云音乐APP</a>&nbsp;扫码登录</p>
      </div>
    </div>
    <div class="foot">
      <Button>选择其他登录方式</Button>
    </div>
  </div>
</template>

<script>
import { Button } from 'element-ui'
import imgSrc from '@/imags/f.png'
import errQRCode from '@/imags/errQrCode.png'
import { getQRCode, qrCodeCreate } from '@/http/api.ts'
export default {
  name: 'loginDome',
  components: {
    Button,
  },
  data() {
    return {
      imgSrc: imgSrc,
      errQRCode: errQRCode,
      qrCode64: '',
    }
  },
  methods: {
    async refReshQRCode() {
      // console.log('点击了刷新')
      const { code, unikey } = await getQRCode()
      // console.log(unikey, code, 'data======')
      if (code == 200) {
        const result = await qrCodeCreate({
          key: unikey,
          qrimg: true,
        })
        this.qrCode64 = result.qrimg.length ? result.qrimg : null;
        // console.log(this.qrCode64, 'tupian64========')
      }
    },
  },
  mounted: () => {
    // const data = await getQRCode()
    // console.log(getQRCode, '获取到的key==')
  },
}
</script>

<style lang="less" scoped>
.warp {
  // margin: 0 0 20px 0;
  text-align: center;

  .foot {
    margin-top: 30px;
  }

  .scan-box {
    display: flex;
    // text-align: center;
    align-items: center;
    justify-content: center;

    .left {
      width: 125px;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .rig {
      margin-left: 25px;

      .qr-code-box {
        width: 138px;
        height: 138px;
        padding: 4px;
        margin: 13px auto;

        .qr-code {
          position: relative;
          width: 128px;

          img {
            height: 100%;
            width: 100%;
          }

          .tops {
            .my-mt-5 {
              margin-bottom: 10px;
            }

            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.9);
            padding-top: 40px;
          }
        }
      }

      a {
        text-decoration: none;
        color: #0c73c2;
      }
    }
  }
}

.hide-tops {
  display: none;
}
</style>
